page-home {

  .scroll-content{
    overflow-y: hidden;
  }

  .button-md{
    font-weight: 400;
  }

  $mainBackgroundColor: #faf8ef;
  $itemsBackgroundColor: #bbada0;
  $itemBackgroundColor: rgba(238, 228, 218, 0.48);
  $item2:#e8ddd3;
  $item4:#eee1c9;
  $item8:#f3b27a;
  $item16:#f69664;
  $item32:#f77c5f;
  $item64:#f75f3b;
  $item128:#edd073;
  $item256:#edcc62;
  $item512: #fad03e;
  $item1024: #fabc39;
  $item2048: #fab02e;
  $item4096: #fa8d24;
  $item8192: #fa7d1d;
  $item16384: #fa6c14;


  .main{
    background-color: $mainBackgroundColor
  }

  .items-box{
    background-color: $itemsBackgroundColor;
    width: 300px;
    height: 300px;
    margin:100px auto auto;
    border-radius: 8px;
    padding-left:10px;
    padding-top: 10px;
    .item{
      background-color: $itemBackgroundColor;
      width: 62.5px;
      height: 62.5px;
      margin-right: 10px;
      margin-bottom: 10px;
      float: left;
      border-radius: 8px;
      color: #fff;
      font-size: 2em;
      line-height:62.5px;
      text-align: center;
    }

    .item.item-2{
      background-color: $item2;
    }
    .item.item-4{
      background-color: $item4;
    }
    .item.item-8{
      background-color: $item8;
    }
    .item.item-16{
      background-color: $item16;
    }
    .item.item-32{
      background-color: $item32;
    }
    .item.item-64{
      background-color: $item64;
    }
    .item.item-128{
      background-color: $item128;
      box-shadow: 0 0 8px 1px rgba($item128, 0.3);
    }
    .item.item-256{
      background-color: $item256;
      box-shadow: 0 0 8px 1px rgba($item128, 0.4);

    }
    .item.item-512{
      background-color: $item512;
      box-shadow: 0 0 8px 1px rgba($item256, 0.5);
    }
    .item.item-1024{
      background-color: $item1024;
      font-size:1.5em;
      font-weight: 700;
      box-shadow: 0 0 8px 1px rgba($item512, 0.6);
    }
    .item.item-2048{
      background-color: $item2048;
      font-size:1.5em;
      font-weight: 700;
      box-shadow: 0 0 8px 1px rgba($item1024, 0.7);
    }
    .item.item-4096{
      background-color: $item4096;
      font-size:1.5em;
      font-weight: 700;
      box-shadow: 0 0 8px 1px rgba($item4096, 0.8);
    }
    .item.item-8192{
      background-color: $item8192;
      font-size:1.5em;
      font-weight: 700;
      box-shadow: 0 0 8px 1px rgba($item4096, 0.9);
    }
    .item.item-16384{
      background-color: $item16384;
      font-size:1.2em;
      font-weight: 900;
      box-shadow: 0 0 8px 1px rgba($item8192, 1);
    }

  }

  .score-box{
    width: 300px;
    margin:12px auto;
    height:auto;
    .score{
      background-color: rgba(0, 0, 0, 0.47);
      width: 130px;
      height: 60px;
      margin: 10px;
      float: left;
      text-align: center;
      border-radius: 8px;
      padding: 5px;
      p{
        margin: 5px;
        font-size: 1em;
        color: #fff;
      }
      p.now{
        font-size: 1.2em;
      }
    }
  }

  .tips{
    width: 300px;
    height: auto;
    margin: 30px auto;
    h5{
      color: #bcad9f;
    }
    p{
      color: #9e9e9e;
      margin: 0;
    };
  }

  .swipeBox {
    width: 100%;
    height: 80%;
    position: absolute;
    top: 20%;
  }

  .game-over-box {
    padding: 120px 60px 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.2);

    h2,h3{
      text-align: center;
      color: #fff;
      text-shadow: 0 0 1px rgba(0, 0, 0, 0.46);
    }

    button{
      margin:20px 0;

    }

  }
}
